/** Police d'ecriture */
@font-face
{
    font-family: '28Days';
    src: url('polices/28DaysLater.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/** CSS des menus et elements du gwt */
.gwt-MenuBar{
	margin-right: 20px;
}

table.viewPanel tbody tr td img.gwt-Image{
	vertical-align: bottom;
	border: solid black 1px;
}

table.gwt-TabBar{
	background: url("/images/fondTab.png") repeat scroll 0 0 transparent;
    border: 1px solid black;
}

img {
	vertical-align: bottom;
}

.gwt-TabBarItem-wrapper {
	width: 350px;
}

.gwt-TabBar .gwt-TabBarItem-selected, .gwt-TabBar .gwt-TabBarItem-selected .gwt-Label{
	text-align: center;
	background: url("/images/fondTab2.png") repeat scroll 0 0 transparent;
	color: silver;
	border-left: solid black 1px;
	border-right: solid black 1px;
	border-top: solid black 1px;
}

.gwt-TabBar .gwt-TabBarItem {
	width: 170px;
	heigth: 25px;
	font-size: 20px;
	font-weight: bold;
}

.gwt-TabBar .gwt-TabBarItem:hover{
	color: silver;
}

.gwt-MenuBar .gwt-MenuItem-active {
	background-color: white;
	padding: 2px 40px 2px 1px
}

.gwt-TabPanelBottom {
	background-color: white;
		border:solid 1px black;
}

.gwt-Label{
	padding: 5px;
	color: white;
}

gwt-MenuItem-active{
	background:dodgerblue;
    background:-webkit-linear-gradient(deepskyblue,dodgerblue);
    background:   -moz-linear-gradient(deepskyblue,dodgerblue);
    background:    -ms-linear-gradient(deepskyblue,dodgerblue);
    background:     -o-linear-gradient(deepskyblue,dodgerblue);
    background:        linear-gradient(deepskyblue,dodgerblue);
}

.gwt-TabPanelBottom,.gwt-HTML, .gwt-TextArea{
	background: url("/images/fond.jpg") repeat scroll 0 0 white;
	word-wrap: break-word;   
	color: black;
}

.gwt-TabPanelBottom{
	border: solid black 1px;
}

.titre3,.gwt-TextBox,.gwt-PushButton{
	margin-right: 15px;
	color: black;
	text-align: center;
}

.gwt-PushButton{
	background: url();
}

.gwt-TextArea{
	resize: none;
}

.gwt-TabPanelBottom div table tbody tr td table tbody tr td table tbody tr td div.gwt-PushButton{
	margin-right: 15px;
}

.gwt-Button{
	margin-left: 15px;
	margin-righ: 15px;
}
/*******************	CSS des éléments à ID/Classe défini dans l'application *****************************/

html body {
	background: black url(/images/background2.jpeg) no-repeat center;
	margin-top: -150px;
}

table#pc-template-dockPanel{
	margin-left: 50px;
}

.pc-template-img {
	border: 2px lightgrey solid;
	cursor: pointer;
	-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
	-moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);
	-ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);
	-o-transition: all .5s cubic-bezier( .6, 2, .4, 1);
	transition: all .5s cubic-bezier( .6, 2, .4, 1);
}

.pc-template-img:hover {
	border-color: black;
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}

.viewPanel {
	border: 2px solid black;
	margin: 0px 30px 30px 0px;
}

#pc-template-titre {
	font-size: 45px;
	font-family: '28Days';
	color: silver;
	margin: 250px 0px 50px 50px;
	text-align: center;
}

.labelCompetence {
	width: 120px;
}

.titre3 {
	font-size: 20px;
	padding-bottom: 10px;
}

.labelPtsRestants {
	width: 120px;
}

.hPanelSectionner {
	margin-top: 25px;
}

.btn_next {
	vertical-align: bottom;
}

#enteteContent {
	align: center;
	width: 70%;
	min-width: 450px;
	padding-bottom: 10px;
}

#enteteContent tbody tr td div {
	width: 50px;
}

#enteteContent .titre2 {
	text-align: center;
	width: 70%;
	margin-left: 100px;
}

.titre2 {
	font-size: 26px;
}

.titre3 {
	font-size: 22px;
}

.gallery-img {
	padding: 1px 5px 1px 5px;
}

.gwt-TextBox.nameImg {
	font-size: 25px;
	font-weight: bold;
	color: silver;
	background: white url(/images/fondTab.png) repeat;
}

#gallery_sPanel,#viewImg {
	border: 2px solid lightgrey;
}

.gallery_sPanel {
	margin-bottom: 150px;
    margin-left: 175px;
}
.titreListe {
	text-align: center;
	padding: 5px;
}

.listBoxItems {
	margin-left: 20px;
	margin-right: 10px;
	font-size: 20px;
}

.listBoxItems option {
	min-width: 200px;
	height: 25px;
	padding: 10px;
}

.itemSelected {
	border: 2px solid black;
	-webkit-transition: all .5s cubic-bezier( .6, 2, .4, 1);
	-moz-transition: all .5s cubic-bezier( .6, 2, .4, 1);
	-ms-transition: all .5s cubic-bezier( .6, 2, .4, 1);
	-o-transition: all .5s cubic-bezier( .6, 2, .4, 1);
	transition: all .5s cubic-bezier( .6, 2, .4, 1);
}

.itemSelected:hover{
	border: 2px solid black;
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}

.sPanelImg {
	border: 2px solid lightgrey;
}

#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody{
	background:linear-gradient(#90C, #8600B3);
}

#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody{
	width:auto;
	margin: 0px 5px 0px 0px;
	margin:100px auto;
	font:1.1em sans-serif;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3),0 5px 10px rgba(0,0,0,.25),0 20px 20px rgba(0,0,0,.15);
	box-shadow: 0 1px 3px rgba(0,0,0,.3),0 5px 10px rgba(0,0,0,.25),0 20px 20px rgba(0,0,0,.15);
}
#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr{
    background:dodgerblue;
    background:-webkit-linear-gradient(deepskyblue,dodgerblue);
    background:   -moz-linear-gradient(deepskyblue,dodgerblue);
    background:    -ms-linear-gradient(deepskyblue,dodgerblue);
    background:     -o-linear-gradient(deepskyblue,dodgerblue);
    background:        linear-gradient(deepskyblue,dodgerblue);
}
#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr:first-child,
#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr:first-child td{
	border-radius:3px 0 0 3px;
}

#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr:last-child,
#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr:last-child td{
	border-radius:3px 3px 3px 3px;
}

#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr td{
	display:block;
	position:relative;
	text-align:center;
	text-decoration:none;
	padding:8px 25px 17px 25px;
	color:black;
    color: rgba(0,0,0,.7);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,32%) inset,
                0 -2px 0 hsl(210,100%,38%) inset,
                0 -3px 0 hsl(210,100%,44%) inset,
                0 -4px 0 hsl(210,100%,50%) inset,
                0 -5px 0 hsl(210,100%,60%) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,32%) inset,
                0 -2px 0 hsl(210,100%,38%) inset,
                0 -3px 0 hsl(210,100%,44%) inset,
                0 -4px 0 hsl(210,100%,50%) inset,
                0 -5px 0 hsl(210,100%,60%) inset;
    -webkit-transition: all .3s .1s;
       -moz-transition: all .3s .1s;
        -ms-transition: all .3s .1s;
         -o-transition: all .3s .1s;
            transition: all .3s .1s;
    font-size: 15px;

}
#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr td:hover,
#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr td:focus{
    background:#51c3fa;
    background: rgba(255,255,255,.2);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,42%) inset,
                0 -2px 0 hsl(210,100%,48%) inset,
                0 -3px 0 hsl(210,100%,54%) inset,
                0 -4px 0 hsl(210,100%,60%) inset,
                0 -5px 0 hsl(210,100%,70%) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 
                0 -1px 0 hsl(210,100%,42%) inset,
                0 -2px 0 hsl(210,100%,48%) inset,
                0 -3px 0 hsl(210,100%,54%) inset,
                0 -4px 0 hsl(210,100%,60%) inset,
                0 -5px 0 hsl(210,100%,70%) inset; 
    -webkit-transition: all .3s 0s;
       -moz-transition: all .3s 0s;
        -ms-transition: all .3s 0s;
         -o-transition: all .3s 0s;
            transition: all .3s 0s;
}
#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr td:active{
    background: #09c;
    background: rgba(0,0,0,.15);
    background: -webkit-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:    -moz-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:     -ms-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:      -o-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:         linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}
#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr td::before{
	content:'';
	width:4px;
	height:4px;
	background:rgba(0,0,0,.2);
	border-radius:50%;
	position:absolute;
	left:50%;
	bottom:9px;
}
#pc-template-dockPanel tbody tr td table tbody tr td div.gwt-MenuBar table tbody tr td:hover::before{
	background:white;
	-webkit-box-shadow:0 -1px 0 rgba(0,0,0,.4);
	box-shadow:0 -1px 0 rgba(0,0,0,.4);
}